<template>
    <div class="menuVue">
        <vue-modaltor
			:visible="open"
			@hide="open = false"
			:default-width="'60%'"
			:bg-overlay = "'rgba(0,0,0,0.3)'"
			:bg-panel = "'#fff'"
			:animation-panel="'modal-slide-top'">
			<div class="manageMenu clear_float  " >
                <div class="manageTitle">模式选择</div>
                <div class="manageSelect float_left">
                    <div @click="select('yu')">
                        <img v-show="type!='yu'" src="../../static/images/manage/降雨(1).png" alt="">
                        <img v-show="type=='yu'" src="../../static/images/manage/降雨.png" alt="">
                        <span>降雨</span>
                    </div>
                    <div @click="select('feng')">
                        <img v-show="type!='feng'" src="../../static/images/manage/台风(1).png" alt="">
                        <img v-show="type=='feng'" src="../../static/images/manage/台风.png" alt="">
                        <span>台风</span>
                    </div>
                    <div @click="select('hongL')">
                        <img v-show="type!='hongL'" src="../../static/images/manage/洪涝(1).png" alt="">
                        <img v-show="type=='hongL'" src="../../static/images/manage/洪涝.png" alt="">
                        <span>洪涝</span>
                    </div>
                </div>

                <div class="manageTitle">自定义（只能选择四个组件）</div>
                <div class="manageMenuTitle">基本</div>
                <div v-if="item.parent=='jiben'" @click="changeMenuF(item)" v-for="(item , index) of blocksAll" :class="item.type ? 'active_leixin' : '' " :key="index" class="check_box_C">
                    <img :src="imgAtrr[item.name]">
                    <img class="selSS" src="../../static/images/manage/sel.png">
                    <span>{{item.name}}</span>
                </div>
                <div class="manageMenuTitle">降水</div>
                <div v-if="item.parent=='water'" @click="changeMenuF(item)" v-for="(item , index) of blocksAll" :class="item.type ? 'active_leixin' : '' " :key="index" class="check_box_C">
                    <img :src="imgAtrr[item.name]">
                    <img class="selSS" src="../../static/images/manage/sel.png">
                    <span>{{item.name}}</span>
                </div>
                <div class="manageMenuTitle">风</div>
                <div v-if="item.parent=='wind'" @click="changeMenuF(item)" v-for="(item , index) of blocksAll" :class="item.type ? 'active_leixin' : '' " :key="index" class="check_box_C">
                    <img :src="imgAtrr[item.name]">
                    <img class="selSS" src="../../static/images/manage/sel.png">
                    <span>{{item.name}}</span>
                </div>
                <div @click="manageMenuF()" class="button">确认</div>
            </div>
        </vue-modaltor>
    </div>
    
    
</template>

<script>
import Vue from 'vue'
import VueModalTor from 'vue-modaltor';
Vue.use(VueModalTor);
export default {
    props:["blocksAll"],
	components: {
        
    },
	data() {
		return {
            type:"yu",
            typeName:"降水",
            open:false,
            imgAtrr:{
                "基本信息":"../../static/images/manage/jiben.png",
                "实况告警信息":"../../static/images/manage/warn.png",
                "近12小时逐小时最大雨量":"../../static/images/manage/water12.jpg",
                "水位信息":"../../static/images/manage/shuiwei.png",
                "降水信息":"../../static/images/manage/jiangshuixinxi.png",
                "雨量排行":"../../static/images/manage/mianyu.png",
                "实况降水图":"../../static/images/manage/live.jpg",
                "雷达定量降水":"../../static/images/manage/radar.png",
                "水位24小时趋势图":"../../static/images/manage/shuiwei24.jpg",
                "极大风信息":"../../static/images/manage/jidafeng.jpg",
                "预警":"../../static/images/manage/oldwarn.png",
                "综合概况":"../../static/images/manage/zonghe.jpg",
            },
            yu:["综合概况","近12小时逐小时最大雨量","降水信息","实况降水图"],
            feng:["综合概况","近12小时逐小时最大雨量","极大风信息","水位信息",],
            hongL:["综合概况","水位24小时趋势图","水位信息","实况告警信息"],
		}
	},
	methods:{
        show(){
            this.open=true;
        },
        select(type){
            console.log(this[type]);
            console.log(type);
            this.type=type;
            var obj={
                "yu":"降雨模式",
                "feng":"台风模式",
                "hongL":"洪涝模式",
            }
            var p;
            for(p in obj){
                console.log(p,type);
                if(p==type){
                    this.typeName=obj[p];
                     console.log(this.typeName);
                }
            };
            for(var i=0;i<this.blocksAll.length;i++){
                    this.blocksAll[i].type=false;
            };
            for(var i=0;i<this.blocksAll.length;i++){
                for(var p=0;p<this[type].length;p++){
                    if(this[type][p]==this.blocksAll[i].name){
                        this.blocksAll[i].type=true;
                    }
                }
            };
        },
        changeMenuF(item){
            for(var i=0;i<this.blocksAll.length;i++){
                if(item.name==this.blocksAll[i].name){
                    this.blocksAll[i].type=!this.blocksAll[i].type;
                }
            };
            
        },
        manageMenuF(){
            var arr=[];
            for(var i=0;i<this.blocksAll.length;i++){
                if(this.blocksAll[i].type){
                    arr.push(this.blocksAll[i].name)
                };
            };
            var obj={
                arr:arr,
                typeName:this.typeName
            }
            console.log(arr)
            if(arr.length!=4){
                alert("必须选择四个模块！")
                return false;
            };
            this.open=false;
            this.$emit('refreshBlocksAll',obj);
        },
        
    },
	mounted(){
		// this.$emit('refreshTop',this.title);
        
	}
}
</script>

<style lang="less">

    .menuVue{
        .modal-vue---close-icon{
            z-index: 12;
        }
        .manageTitle{
            color: #FFFF91;
            font-size: 15px;
            width: 100%;
            text-align: left;
        }
        .modal-vue-overlay{
            background-color: rgba(0, 0, 0, 0.3) !important;
        }
        .modal-vue--content{
            box-shadow: 0px 0px 3px #fff;
            padding: 0;
        }
        .modal-vue-panel{
                border-radius: 13px;
                box-shadow: 1px 1px 40px #89dbf5 !important;
        }
        .modal-vue--content-panel{
            padding-bottom: 0;
            padding-top: 0;
        }
        .float_left{
            &>div{
                float: left;
            }
        }
        .manageMenu{
            padding: 10px;
            padding-bottom: 50px;
            left:87px;
            background: #2E6792;
            width: 100%;
            border: 1px solid #89dbf5;
            
            img{
                width: 150px;
                height: 80px;
                display: block;
            }
            .manageSelect{
                &>div{
                    padding:0 20px;
                    position: relative;
                }
                img{
                    width: 50px;
                    height: auto;
                    display: inline-block;
                    vertical-align: top;
                }
                span{
                    display: inline-block;
                    width: 20px;
                    margin-left: 5px;
                    color: #2AEFB6;
                }
            }
            .selSS{
                position: absolute;
                top: 6px;
                left: 10px;
                opacity: 0.8;
                display: none;
            }
            .manageMenuTitle{
                width: 100%;
                float: left;
                color: #93E7FF;
                font-weight: bold;
                margin: 5px;
                padding-left: 10px;
                border-top: 1px solid #1D9EBB;
                text-align: left;
                &:first-child{
                    border-top: none;
                }
            }
            &>div{
                padding: 6px 10px;
                float: left;
                position: relative;
            }
            
            .active_leixin{
                img{
                    display: block;
                }
            }
            .selectA{
                display: none;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: #2AEFB6;
                color: #fff;
                position: absolute;
                top: 35%;
                left: 45%;
                z-index: 1;
            }
            
            span{
                margin-left: 0;
                color: #fff;
                font-size: 13px;
            }
            .button{
                position: absolute;
                bottom: 10px;
                right: 10px;
                cursor: pointer;
                color: #fff;
                &:hover{
                    color: yellow;
                }
            }
        }
    }
</style>
